<template>
  <section class="contianer">
    <el-row type="flex" justify="space-between">
      <!-- 顶部过滤列表 -->
      <div class="flights-content">
        <!-- 过滤条件 -->
        <div>
          <flightsFilters :data="flightsData" @setDataList="setDataList" />
        </div>

        <!-- 航班头部布局 -->
        <div>
          <FlightsListHead />
        </div>

        <!-- 航班信息 -->
        <div>
          <FlightsItem :data="item" v-for="item in dataList" :key="item.id" />
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryInfo.pagenum"
            :page-sizes="[3, 5, 10, 15]"
            :page-size="queryInfo.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>

      <!-- 侧边栏 -->
      <div class="aside">
        <flightsAside />
        <!-- 侧边栏组件 -->
      </div>
    </el-row>
  </section>
</template>

<script>
import FlightsListHead from "@/components/air/FlightsListHead";
import FlightsItem from "@/components/air/FlightsItem";
import flightsFilters from "../../components/air/flightsFilters";
import flightsAside from "../../components/air/flightsAside";
export default {
  components: {
    FlightsListHead,
    FlightsItem,
    flightsFilters,
    flightsAside
  },
  watch: {
    $route() {
      this.getData();
    }
  },
  data() {
    return {
      flightsData: {},
      queryInfo: {
        pageIndex: 1,
        pageSize: 10
      },
      dataList: [],
      total: 0,
      flightsData: {
        flights: [],
        info: {},
        options: {}
      }
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      // 现在所有的参数都在 URL 直接发送请求
      this.$axios({
        url: "/airs",
        params: this.$route.query
      }).then(res => {
        console.log(res.data);
        this.flightsData = res.data;

        this.flightsData = { ...res.data };
        console.log(this.flightsData);

        this.setDataList();

        const beginIndex =
          (this.queryInfo.pageIndex - 1) * this.queryInfo.pageSize;
        // console.log(beginIndex);

        const endIndex = beginIndex + this.queryInfo.pageSize;
        // console.log(endIndex);

        this.dataList = this.flightsData.flights.slice(beginIndex, endIndex);
        console.log(this.dataList);
        this.total = res.data.total;
      });
    },
    setDataList(arr) {
      // 如果有新数据从第一页开始显示
      if (arr) {
        this.queryInfo.pageIndex = 1;
        console.log(arr);
        this.flightsData.flights = arr;
        this.flightsData.total = arr.length;
        this.total = arr.length;
      }
      const start = (this.queryInfo.pageIndex - 1) * this.queryInfo.pageSize;
      const end = start + this.queryInfo.pageSize;
      this.dataList = this.flightsData.flights.slice(start, end);
    },
    handleSizeChange(newSize) {
      this.queryInfo.pageSize = newSize;
      const beginIndex =
        (this.queryInfo.pageIndex - 1) * this.queryInfo.pageSize;
      const endIndex = beginIndex + this.queryInfo.pageSize;
      this.dataList = this.flightsData.flights.slice(beginIndex, endIndex);
    },
    handleCurrentChange(newIndex) {
      this.queryInfo.pageIndex = newIndex;
      const beginIndex =
        (this.queryInfo.pageIndex - 1) * this.queryInfo.pageSize;
      const endIndex = beginIndex + this.queryInfo.pageSize;
      this.dataList = this.flightsData.flights.slice(beginIndex, endIndex);
    }
  }
};
</script>

<style lang="less" scoped>
.contianer {
  width: 1000px;
  margin: 20px auto;
}

.flights-content {
  width: 745px;
  font-size: 14px;
}

.aside {
  width: 240px;
}
</style>
